<div id="content"  >

    <div class="row">
        <big-breadcrumbs items="['Charts', 'Easy Pie Charts']" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
        <div smart-include="app/layout/partials/sub-header.tpl.html"></div>
    </div>
    <!-- widget grid -->
    <div class="row">

    <div class="col-sm-12" easy-pie-chart-container>

        <div class="well">
            <h1>Easy <span class="semi-bold">Pie Charts</span> <small>Simplified for faster production</small></h1>
            <p>Easy Pie Charts gives you a nice animation twist to your pie charts - they are also dynamic, which will make it a really nice ajax based live charts for your project</p>
            <p class="note">&lt;div class=&quot;easy-pie-chart txt-color-blue easyPieChart&quot; data-percent=&quot;36&quot; data-size=&quot;180&quot;&gt; data-pie-size=&quot;50&quot;&gt;
                &lt;span class=&quot;percent percent-sign txt-color-blue font-xl semi-bold&quot;&gt;36&lt;/span&gt;
                &lt;/div&gt;</p>
            <ul class="list-inline">
                <li>&nbsp;&nbsp;&nbsp;
                    <div class="easy-pie-chart txt-color-red easyPieChart" data-percent="50" data-size="180" data-pie-size="50">
                        <span class="percent percent-sign txt-color-red font-xl semi-bold">49</span>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                </li>
                <li>&nbsp;&nbsp;&nbsp;
                    <div class="easy-pie-chart txt-color-blue easyPieChart" data-percent="36" data-pie-size="180">
                        <span class="percent percent-sign txt-color-blue font-xl semi-bold">36</span>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                </li>
                <li>&nbsp;&nbsp;&nbsp;
                    <div class="easy-pie-chart txt-color-pinkDark easyPieChart" data-percent="46" data-pie-size="160">
                        <span class="percent percent-sign txt-color-pinkDark font-lg semi-bold">46</span>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                </li>
                <li>&nbsp;&nbsp;&nbsp;
                    <div class="easy-pie-chart txt-color-greenLight easyPieChart" data-percent="56" data-pie-size="110">
                        <span class="percent percent-sign txt-color-greenLight font-md">56</span>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                </li>
                <li>&nbsp;&nbsp;&nbsp;
                    <div class="easy-pie-chart txt-color-orange easyPieChart" data-percent="66" data-pie-size="60">
                        <span class="percent percent-sign txt-color-orange">66</span>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                </li>
                <li>&nbsp;&nbsp;&nbsp;
                    <div class="easy-pie-chart txt-color-darken easyPieChart" data-percent="76" data-pie-size="45">
                        <span class="percent percent-sign font-sm">76</span>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                </li>
                <li>&nbsp;&nbsp;&nbsp;
                    <div class="easy-pie-chart txt-color-blue easyPieChart" data-percent="86" data-pie-size="35">
                        <span class="percent percent-sign font-xs">86</span>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                </li>
            </ul>

        </div>

    </div>
    </div>


</div>